require(['./config'], () => {
    require(['jquery', 'artTemplate', 'loadHeaderFooter'], ($, template) => {
        class Detail {
            constructor() {
                this.tab()
                this.getlist().then(() => {
                    this.zoom()
                    this.addtocart()
                })
            }
            like() {
                $('.heart').on('click', function () {
                    if ($(this.css('diplay') === 'none')) {
                        $(this).css('display', 'block')
                    } else (
                        $(this).css('display', 'none')
                    )
                })
            }
            tab() {
                $('#tab li').on('click', function () {
                    $(this).addClass('ac').siblings().removeClass('ac')
                    $('.explain-list').eq($(this).index()).addClass('ac').siblings().removeClass('ac')
                })
            }
            getlist() {
                const id = location.search.slice(4)
                return new Promise((resolve, reject) => {
                    $.get(`http://www.xiongmaoyouxuan.com/api/detail?id=${id}&normal=1&sa=`, resp => {
                        if (resp.code === 200) {
                            console.log(resp);
                            const {
                                id,
                                price,
                                title,
                                photo,
                                expireMsg,
                                originPrice,
                                coupon,
                                accessoryHints
                            } = resp.data.detail
                            this.detail = {
                                id,
                                price,
                                title,
                                photo,
                                expireMsg,
                                originPrice,
                                coupon,
                                accessoryHints
                            }
                            $('#detailList').html(
                                template('getdetailTemplate', {
                                    id,
                                    price,
                                    title,
                                    photo,
                                    expireMsg,
                                    originPrice,
                                    coupon,
                                    accessoryHints
                                })
                            )
                            resolve()
                        }
                    })

                })

            }
            zoom() {
                $('#xiao li').on('click', function () {
                    console.log(123);
                    $(this).addClass('ac').siblings().removeClass('ac')
                    $('#zhong li').eq($(this).index()).addClass('ac').siblings().removeClass('ac')
                })
            }
            addtocart() {
                $('#addtocart').on('click', (e) => {
                    console.log('target:', $(e.currentTarget).parents('.prod-item').data('prod'))
                    // 当前整个商品对象
                    const { id, title, price, image } = $(e.currentTarget).parents('.prod-item').data('prod')
                    // 构建当前选购商品需要保存的对象信息
                    const currentProduct = {
                        id,
                        title,
                        price,
                        image,
                        amount: 1
                    }

                    // 从本地存储中读取保存的购物车数组，如果没有，则创建空数组
                    // const cart = $.cookie('cart') ? JSON.parse($.cookie('cart')) : []
                    const cart = JSON.parse(localStorage.getItem('cart')) || []

                    // 判断在购物车中是否已保存当前选购的商品信息
                    // 如果存在，则说明之前已经选购过，则叠加数量即可
                    // 如果不存在，则添加到数组中即可
                    const index = cart.findIndex(prod => prod.id === currentProduct.id)
                    if (index !== -1) {
                        cart[index].amount += 1
                    } else {
                        cart.push(currentProduct)
                    }
                    // 保存到 localStorage 中
                    localStorage.setItem('cart', JSON.stringify(cart))
                })
            }
            // addtocart(){
            //     $('#addtocart').on('click',()=>{
            //        console.log(this.shoppingpag());
            //        let cart = localStorage.getItem('cart')
            //        if(cart){
            //             cart = JSON.parse(cart)
            //             const iseExist = cart.some(shop=>{
            //                 return shop.id === this.detail.id
            //             })
            //             if(iseExist){
            //                 //商品存在
            //                cart = cart.map(shop=>{
            //                    if(shop.id === this.detail.id){
            //                        shop.count++
            //                    }
            //                    return shop
            //                }) 
            //                localStorage.setItem('cart',JSON.stringify(cart))
            //             }else{
            //                cart.push({...this.detail,count:1,check:true})
            //                localStorage.setItem('cart',JSON.stringify(cart))
            //             }

            //        }else{
            //            localStorage.setItem('cart',JSON.stringify([{...this.detail,count:1,check:true}]))
            //        }
            //        $('#success').fadeIn(1000,function(){})
            //        setInterval(() => {
            //            $('#success').fadeOut(1000,function(){})
            //        }, 10);
            //     })

            // }
            //  shoppingpag(){
            //     const cart =localStorage.getItem('cart')
            //     if(cart){
            //         this.cart = JSON.parse(cart)
            //         $('#shoppingbag').html(this.cart.length)
            //     }
            // }
        }
        new Detail()
    })
})